import { useState } from "react";
import { LogoutOutlined } from "@ant-design/icons";
import { Button, Modal, Tooltip } from "antd";

type LogoutButtonProps = {
  data: any;
};

const createPromise = (data: any) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data);
    }, 1000);
  });
};

export default function LogoutButton({ data }: LogoutButtonProps) {
  const [open, setOpen] = useState(false);

  const onCreate = (values: any) => {
    return createPromise(values);
  };

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <>
      <Tooltip title="注销">
        <Button
          type="link"
          size="middle"
          icon={<LogoutOutlined className="rotate-[-90deg]" />}
          onClick={handleOpen}
        />
      </Tooltip>
      <Modal open={open} onCancel={handleClose} onOk={onCreate} centered>
        <div>是否确定注销用户ID: {data.id}的帐号？注销后不可恢复哦！</div>
      </Modal>
    </>
  );
}
